import React, { useState } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import Area from 'components/Area';
import { Card, Form, Switch, Select } from 'antd';
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};
const { Item } = Form;
const { Option } = Select;
const FuncSetting = () => {
    const [selectedArea, setSelectedArea] = useState(-1);
    /** 表单初始化 */
    const [form] = Form.useForm();
    return (
        <div className="func-setting">
            <Breadcrumb crumbs={['监控配置', '功能设置']} />
            <div className="flex">
                <Area selectedArea={selectedArea} setSelectedArea={setSelectedArea}></Area>
                <Card className="func-setting-right" hoverable>
                    <Form {...formItemLayout} form={form}>
                        <Item label="数据传输协议" name="infraredFlag" valuePropName="checked">
                            <Select placeholder="请选择" style={{ width: 200 }} allowClear>
                                <Option value="1">ZZIOT(系统默认)</Option>
                                <Option value="2">ON VIF</Option>
                            </Select>
                        </Item>
                        <Item label="车辆行人检测" name="collisionFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="升降异常检测" name="inplaceFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="碰撞报警检测" name="ledFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="升降同步性检测" name="ledFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                    </Form>
                </Card>
            </div>
        </div>
    );
};
export default FuncSetting;
